import React from "react";
import PropTypes from "prop-types";
import { routerRedux } from "dva/router";
import { connect } from "dva";
import { Row, Col, Button, Form, Select, Input, DatePicker, Modal } from "antd";
import { formatDate } from "utils";

const { RangePicker, MonthPicker } = DatePicker;
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 }
};
let borrowStartAt = "";
let borrowEndAt = "";
const ApplicationModal = ({
  form: { validateFields, getFieldsValue, getFieldDecorator },
  currentItem,
  userList,
  onOk,
  ...modalProps
}) => {
  const { borrowUserName, id } = currentItem;
  const handleSubmit = e => {
    validateFields((err, values) => {
      if (!err) {
        const params = {
          dataType: values["dataType"] || "",
          borrowStartAt: `${borrowStartAt} 00:00:00`,
          borrowEndAt: `${borrowEndAt} 00:00:00`,
          borrowReason: values["borrowReason"],
          contactWay: values["contactWay"],
          documentId: id,
          borrowUserId: values["borrowUserId"]
        };
        onOk(params);
      }
    });
  };

  const onChange = (date, dateString) => {
    if (date && dateString) {
      borrowStartAt = dateString[0];
      borrowEndAt = dateString[1];
    }
  };

  const props = {
    onOk: handleSubmit,
    ...modalProps
  };
  return (
    <Modal {...props}>
      <Form>
        <FormItem {...formItemLayout} label="借阅申请人">
          {getFieldDecorator("borrowUserId", { initialValue: borrowUserName })(
            <Select style={{ width: "100%" }}>
              {(userList || []).map(item => (
                <Option value={`${item.userId}`} key={item.userId}>
                  {item.username}
                </Option>
              ))}
            </Select>
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="借阅方式">
          {getFieldDecorator("dataType")(
            <Select style={{ width: "100%" }}>
              <Option value="0">电子资料</Option>
              <Option value="1">纸质资料</Option>
            </Select>
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="借阅时间">
          {getFieldDecorator("date")(
            <RangePicker style={{ width: "100%" }} onChange={onChange} />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="借阅原因">
          {getFieldDecorator("borrowReason")(<TextArea rows={4} />)}
        </FormItem>
        <FormItem {...formItemLayout} label="联系方式">
          {getFieldDecorator("contactWay")(<Input />)}
        </FormItem>
      </Form>
    </Modal>
  );
};

ApplicationModal.propTypes = {
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object
};

export default Form.create()(ApplicationModal);
